import React from "react";
import UserInfoHeader from "../../Component/UserInfoHeader";
import './index.css';
import Logo from '../../Common/svg/Logo';
import { Input} from 'antd';
import UserServer from "../../Server/User";
import UserCheck from "../../utils/UserCheck";
import Cookie from "../../utils/Cookie";

export default class Setting extends React.Component{
    constructor(props){
        super();
        document.title="设置";
        console.log(props.userVx)
        this.state={
            phone:"",//手机
            phoneS:props.phone===undefined?false:true,
            userVx:"",//微信
            userVxS:props.userVx===undefined?false:true,
            userQq:"", //qq
            userQqS:props.userQq===undefined?false:true,
        }
        UserServer.SelectUserInformation(UserCheck.GetUserID())
        .then(response=>{
            this.setState({
                phone:response.data.userPhone,
                phoneS:response.data.userPhone===""||response.data.userPhone===null?false:true,
                userVx:response.data.userVxAccount,
                userVxS:response.data.userVxAccount===""||response.data.userVxAccount===null?false:true,
                userQq:response.data.userQqAccount,
                userQqS:response.data.userQqAccount===""||response.data.userQqAccount===null?false:true
            })
        });
    }
    ClearErr(){
        this.setState({
            err:""
        });
    }
    SetErr(value){
        this.setState({
            err:value
        });
    }
    BindPhone(e){
        let str=e.target.textContent;
        //绑定
        if(str==="绑定")
        {
            let data = {
                name: 'BindPhone',
            }
            window.parent.postMessage(data,'*'); //window.postMessage
        }
        else
        {
            let data = {
                name: 'ChangePhone',
                phone:this.state.phone
            }
            window.parent.postMessage(data,'*'); //window.postMessage
        }
    }
    BindQQ(e){
        this.ClearErr();
        let str=e.target.textContent;
        let qq = this.state.userQq;
        if(str==="绑定")
        {
            if(qq===""||qq===null)
            {
                this.SetErr("请输入QQ号");
                return false;
            }
            UserServer.BindingQQ(qq,UserCheck.GetUserID())
            .then(response=>{
                console.log(response);
            });
        }
        else
        {

        }
    }
    LogOut(){
        Cookie.clearCookie();
    }
    render(){
        return(
            <div>
                <div><UserInfoHeader isSetting={true}/></div>
                <div className="UserInfo_Down">
                    <div className="UserInfo_Down_Row">
                        <span className="UserInfo_Down_Title">微信</span>
                        <div className="UserInfo_Down_Row_Body">
                            <Input onChange={e=>this.setState({userVx:e.target.value})} placeholder="请输入微信号" value={this.state.userVx}  disabled={this.state.userVxS}/>
                        </div>
                        <span className="UserInfo_Down_Row_Last" onClick={e=>this.BindWX(e)}>{this.state.userVx===""||this.state.userVx===null?"绑定":"解绑"}</span>
                    </div>
                    <div className="UserInfo_Down_Row">
                        <span className="UserInfo_Down_Title">QQ</span>
                        <div className="UserInfo_Down_Row_Body">
                            <Input onChange={e=>this.setState({userQq:e.target.value})} placeholder="请输入QQ号"  value={this.state.userQq}  disabled={this.state.userQqS}/>
                        </div>
                        <span className="UserInfo_Down_Row_Last" onClick={e=>this.BindQQ(e)}>{this.state.userQqS?"解绑":"绑定"}</span>
                        <div className="ERR_Info">
                            <span><font color="red">{this.state.err}</font></span>
                        </div>
                    </div>
                    
                    <div className="UserInfo_Down_Row">
                        <span className="UserInfo_Down_Title">手机号</span>
                        <div className="UserInfo_Down_Row_Body">
                            <Input onChange={e=>this.setState({phone:e.target.value})} placeholder="请输入手机号"  value={this.state.phone} disabled={this.state.phoneS} />
                        </div>
                        <span className="UserInfo_Down_Row_Last" onClick={e=>this.BindPhone(e)}>{this.state.phoneS?"解绑":"绑定"}</span>
                    </div>
                    <div className="UserInfo_Down_Row_Icon">
                        <a href="/about" target="Layout_MainContainer">
                            <div className="Icon_Out">
                                <div className="Icon_Circular">
                                    <Logo width="31" height="23"/>
                                </div>
                                <span>关于派</span>
                            </div>
                        </a>
                        <a href="/contact" target="Layout_MainContainer">
                            <div className="Icon_Out">
                                <div className="Icon_Circular">
                                    <img alt="contact" src="/assets/setting/1.png"/>
                                </div>
                                <span>联系派</span>
                            </div>
                        </a>
                        <a href="/question" target="Layout_MainContainer">
                            <div className="Icon_Out">
                                <div className="Icon_Circular">
                                    <img  alt="question" src="/assets/setting/2.png"/>
                                </div>
                                <span>派.指南</span>
                            </div>
                        </a>
                        <a href="/feedback" target="Layout_MainContainer">
                            <div className="Icon_Out">
                                <div className="Icon_Circular">
                                    <img alt="feedback" src="/assets/setting/3.png"/>
                                </div>
                                <span>反馈</span>
                            </div>
                        </a>
                        <a href="/login" target="_parent" onClick={e=>this.LogOut(e)}>
                            <div className="Icon_Out">
                                <div className="Icon_Circular">
                                    <img alt="out"  src="/assets/setting/4.png"/>
                                </div>
                                <span>退出</span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        )
    }
}